<template>
  <div v-drag>
    <div @click="closePopup(false)" class="mask"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ mid ? (!Boolean(isDefine)?'修改':'确认') : '新增' }}出货单</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <div class="g-mt-10">
            <i @click="addVos" class="el-icon-circle-plus-outline addlist" v-if="!Boolean(isDefine)"></i>
          </div>
        </div>
        <div class="line">
          <span class="lab"></span>
          <div :class="{'error_border':tip_num===1}">
            <div class="line_item" v-for="(item,index) in itemList">
              <div>
                <el-select :disabled="Boolean(isDefine)" filterable placeholder="请选择商品" v-model="item.productId"
                           value-key="id">
                  <el-option
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    v-for="(item,index) in productList">
                  </el-option>
                </el-select>
              </div>
              <div>
                <el-input :disabled="Boolean(isDefine)"
                          :min="backupsList[index].numbers" onKeypress="return(/[\d.]/.test(String.fromCharCode(event.keyCode)))"
                          placeholder="数量" type="Number" v-model.number="item.numbers"></el-input>
              </div>
              <i @click="delVos(index)" class="el-icon-remove-outline" v-if="!item.id&&itemList.length>1"></i>
            </div>
          </div>
        </div>
        <p class="error_line">{{ infoTip }}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmDelivery" v-if="Boolean(isDefine)">确定</span>
        <span @click="confirmEdit" v-else>确定</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {deliveryOrderConfirm, getDeliveryOrderDetail, updateDeliveryOrder} from "@/api/basic/warehouse/deliveryOrder";
  import {getAllWarehouse} from "@/api/basic/warehouse";
  import {getAllUser} from "@/api/sys/user";
  import {listAllData} from "@/api/config/product";

  export default {
    props: ['mid', 'isDefine'],
    data() {
      return {
        menuName: '',
        userId: '',
        warehouseName: '',
        warehouseId: '',
        phone: '',
        parentMenu: [],
        proStatus: 1,
        warehouseList: [],
        productList: [],
        itemList: [],
        backupsList: [],
        infoTip: '',
        tip_num: '',
        loading: false
      }
    },
    mounted() {
      this.getAllProduct();
      if (this.mid) {
        this.getDetail();
      }
    },
    methods: {
      getDetail() {
        let that = this;
        this.loading = true;
        getDeliveryOrderDetail(this.mid).then(res => {
          that.setData(res);
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      },


      //仓库列表
      warehouseData() {
        let that = this;
        getAllWarehouse('').then(res => {
          that.warehouseList = res ? res : [];
        }).catch((e) => {
          that.warehouseList = [];
        });
      },


      //商品列表
      getAllProduct() {
        let that = this;
        listAllData().then(res => {
          that.productList = res ? res : [];
        }).catch((e) => {
          that.productList = [];
        })
      },


      setData(obj) {
        this.itemList = obj.listDetail;
        this.backupsList = JSON.parse(JSON.stringify(obj.listDetail));
      },

      setWarehouseData(data) {
        this.warehouseName = data.name;
      },

      setUserData(data) {
        this.menuName = data.name;
      },

      // 确认编辑
      confirmEdit() {
        if (!this.isEnough(this.itemList)) {
          this.setTip(1, '请填写出货单！');
        } else {
          this.sendInfo();
        }
      },

      confirmDelivery() {
        let that = this;
        that.loading = true;
        let data = {
          deliveryId: that.mid,
        };
        deliveryOrderConfirm(data).then(res => {
          that.closePopup(true);
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
        }).catch((e) => {
          that.loading = false;
        });
      },

      isEnough(data) {
        let num = 0;
        let that = this;
        for (let i = 0; i < data.length; i++) {
          if (data[i].productId) {
            num += data[i].numbers
          } else {
            if (data.length > 1) {
              that.delVos(i);
              i--
            }
          }
        }
        return Boolean(num);
      },


      addVos() {
        let data = {
          numbers: 0,
          productId: '',
        };
        this.itemList.push(data);
        this.backupsList.push(JSON.parse(JSON.stringify(data)))
      },

      delVos(index) {
        this.itemList.splice(index, 1);
        this.backupsList.splice(index, 1)
      },

      sendInfo() {
        let that = this;
        that.loading = true;
        let data = {
          productInfo: that.itemList,
        };
        data.id = that.mid;
        updateDeliveryOrder(data).then(res => {
          that.closePopup(true);
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
        }).catch((e) => {
          that.loading = false;
        });
      },

      setTip(num, text) {
        this.tip_num = num;
        this.infoTip = text
      },

      // 关闭
      closePopup(refresh) {
        this.$emit('listenToChild', {refresh: refresh})
      }
    }
  }
</script>

<style scoped>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #60BAE7;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #DCDFE6;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid #DCDFE6;
    border-radius: 6px;
  }

  .avatar {
    max-width: 210px;
    min-width: 60px;
    height: 100px;
    display: block;
    border-radius: 6px;
    margin-right: 15px;
    border: 1px solid #bbb;
  }

  .line_item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
  }

  .line .line_item > div {
    width: 45% !important;
  }

  .line .line_item i, .addlist {
    font-size: 25px;
    color: #6687f9;
    cursor: pointer;
  }
</style>
